<#import "/global.ftl" as global_macro />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Index Title</title>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding:0;
            overflow: hidden;
        }
    </style>
<@global_macro.importEasyUi/>
</head>
<body>
<script type="text/javascript">
    var testStr = "<@global_macro.basePath/>";
</script>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:50px;">
    <a id="btn" href="<@global_macro.basePath/>/logout" class="easyui-linkbutton">logout</a>
</div>
<div data-options="region:'south'" style="height:30px;"></div>
<div  data-options="region:'west',title:'Menu',split:true" style="width:150px;">
    <span>user: ${currentUser}</span><br/>
    <ul id="menuTree" class="easyui-tree">
        <#list menuList as menu>
            <li>
                <span> ${menu.menuName}</span>
                <ul>
                    <#list menu.itemList as menuItem>
                        <li data-options="attributes:{'url':'${menuItem.href}'}"><span>${menuItem.menuName}</span></li>
                    </#list>
                </ul>
            </li>
        </#list>
    </ul>
</div>
<div id="centerDiv" data-options="region:'center'">
    <div id="tables" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
    </div>
</div>

<script type="text/javascript">
    var height = $(window).height()-80;
    $(window).resize(function(){
        var height1 = $(window).height()-80;
        var width = $(window).width()-150;
        $("#centerDiv").attr("style","width:"+width+"px;height:"+height1+"px");
        $("#centerDiv").layout("resize",{
            width:width+"px",
            height:height1+"px"
        });

//        changeFrameHeight();
    });



    function changeFrameHeight(){
        var ifm= document.getElementById("iframepage");
        ifm.height=document.documentElement.clientHeight;
    }

    var openMenu = [];
    var tables = $('#tables');
    var tabsId = 0;
    $('#tables').tabs({
        onClose:function(node){
            openMenu.pop(node.text);
        }
    });

    $('#menuTree').tree({
        onClick: function(node){
            var iframe = '<iframe src="<@global_macro.basePath/>' + node.attributes.url + '" frameborder="0" style="border:0;width:100%;height:99.5%;"></iframe>';

            var opts = {
                title: node.text,
                closable:true,
                <#--href:"<@global_macro.basePath/>"+node.attributes.url,-->
                content : iframe ,
                border:false,
                tools:[{
                    handler:function(){
                    }
                }]
            };
            var flag = false;
            $.each(openMenu,function(index,item){
                if(item==node.text) {
                    flag = true;
                }
            });
            if(flag) {
                tables.tabs('select',opts.title);
            } else {
                openMenu.push(node.text);
                $('#tables').tabs('add',opts);
            }
        }
    });
</script>
</body>
</html>